<template>
	<view class="">
		<view class="body_box">
			<!-- 赚钱页面 -->
			<view class="home_back">
			</view>
			<!-- 上半部分 -->
			<view class="title">
				<view class="title_top_t">
					<text>100 &gt;</text>
					<text>100 &gt;</text>
					<text>1000 &gt;</text>
				</view>
				<view class="title_top_b">
					<text>邀请好友(人)</text>
					<text>好友消费(笔)</text>
					<text>累计收益(元)</text>

				</view>
				<view class="title_bottom">
					<text class="title_bottom_l">可提现金额：0.00元</text>
					<text class="title_bottom_r" @click="promotion1">提现</text>
				</view>
				<view class="user">
					<image src="../../static/promotion/user.png"></image>
					<view class="user_r">
						<view class="usere_content_t">
							<text>用户王二麻子追寡妇</text>
						</view>
						<view class="usere_content_b">
							<text>成功提现佣金230元，已到账。</text>
						</view>
					</view>
					<view class="time">2023-4-7</view>
				</view>
			</view>
		</view>
		<!-- 中间部分 -->
		<view class="promotion">
			<text>赚钱攻略</text>
			<view>
				<image src="../../static/promotion/content.png" class="promotion_tx"></image>
			</view>
			<view class="strategy" :loading="isLoading" @click="show = true">
				赚钱攻略&nbsp;&nbsp;>
			</view>
			<u-popup :show="show" mode="center" :round="30" @open="open">
				<view class="tc">
					<view class="tc_top">赚钱攻略</view>
					<view class="tc_middle">
						<view class="tc_middle_one">
							<h2>1、如何提现?</h2>
							<h5>可在“用户中心->智能客服”联系客服提现。</h5>
						</view>
						<view class="tc_middle_two">
							<h2>2、为什么我邀请的人充值后，我没有佣金？ </h2>
							<h5>(1)被邀请人需要是没有使用过本产品的新用户。</h5>
							<h5>(2)被邀请人已经被其他用户邀请过了，不是你邀请的新用户。</h5>
							<h5>(3)需要通过本页面进行转发或生成专属海报推广才有效</h5>
						</view>
						<view class="tc_middle_three">
							<h2>3.怎样才能赚更多的佣金？</h2>
							<h5>尽早邀请新用户锁定下级（即我的下下级），后续下 下级用户所有消费都有5%的佣金。</h5>
						</view>
					</view>
					<view class="tc_bottom" @click="gb">确定</view>
				</view>
				<view class="gb" @click="gb">
					<img class="gb_a" src="">
				</view>
			</u-popup>
		</view>
		<button class="btn_bottom" @click="invite">
			<text>立即邀请</text>
		</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
			};
		},
		onLoad() {

		},
		onShareAppMessage: function() {},
		onShareTimeline: function(res) {},
		methods: {
			close() {
				this.show = false;
			},
			open() {},
			open() {
				console.log('open');
			},
			gb() {
				this.show = false
				console.log('close');
			},
			tz() {
				uni.switchTab({
					url: '../document/document'
				});
			},
			invite() {
				uni.navigateTo({
					url: '../promotion4/promotion4'
				});
			},
			promotion1() {
				uni.navigateTo({
					url: '../promotion2/promotion2'
				});
			},
			memory() {}
		}
	};
</script>

<style lang="scss" scoped>
	.home_back {
		display: flex;
		width: 750rpx;
		height: 312rpx;
		justify-content: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url("https://www.qianfanwanmu.com/extra/addExtra/1681106828818.png");

		.home_back_text {
			margin-top: 60rpx;
			width: 697rpx;
			height: 50rpx;
			font-size: 47rpx;
			font-family: FZLanTingHeiS-B-GB;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.u-popup_title {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #363636;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.u-popup_con {
		padding: 20rpx 0;
	}

	.title {
		width: 703rpx;
		height: 295rpx;
		transform: translateY(-85rpx);
		margin: 0 49rpx;
		background-color: #fff;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(172, 172, 172, 0.18);
		border-radius: 18rpx;

		.title_top {
			display: flex;
			font-weight: bold;
			font-family: PingFang-SC-Bold;
			justify-content: space-evenly;

			&_t {
				margin: 52rpx 0 0 71rpx;
				font-family: PingFang-SC-Bold;
				font-size: 36rpx;
				color: #FF7906;

				text:nth-child(1) {
					margin: 0 50rpx 0 45rpx;
					// background-color: #ede7e7;
				}

				text:nth-child(2) {
					margin: 0 50rpx 0 60rpx;
					// background-color: #ede7e7;
				}

				text:nth-child(3) {
					margin: 0 0 0 60rpx;
					// background-color: #ede7e7;
				}
			}

			&_b {
				font-weight: Medium;
				font-size: 25rpx;
				line-height: 48rpx;
				font-family: PingFang-SC-Medium;

				text:nth-child(1) {
					width: 142rpx;
					height: 24rpx;
					margin: 32rpx 30rpx 38rpx 71rpx;
					// background-color: #ede7e7;
				}

				text:nth-child(2) {
					width: 142rpx;
					height: 24rpx;
					margin: 32rpx 30rpx 38rpx 63rpx;
					// background-color: #ede7e7;
				}

				text:nth-child(3) {
					width: 142rpx;
					height: 24rpx;
					margin: 32rpx 0 38rpx 45rpx;
					// background-color: #ede7e7;
				}
			}

		}

		.title_bottom {
			display: flex;
			width: 605rpx;
			height: 91rpx;
			align-items: center;
			border-radius: 10rpx;
			margin: 35rpx 50rpx 30rpx 47rpx;
			justify-content: space-around;
			background-color: #5490ff;

			&_l {
				font-family: PingFang-SC-Medium;
				color: #fff;
			}

			&_r {
				width: 107rpx;
				height: 47rpx;
				line-height: 47rpx;
				text-align: center;
				border-radius: 25rpx;
				font-size: 13px;
				background-color: #fff;
				font-family: PingFang-SC-Medium;
			}
		}

	}

	.user {
		position: relative;
		width: 703rpx;
		height: 121rpx;
		background: #F6F6F6;
		border-radius: 12rpx;
		margin-top: 60rpx;

		image {
			position: absolute;
			top: 20rpx;
			width: 82rpx;
			height: 82rpx;
			margin: 0 30rpx;
		}

		.user_r {
			margin-left: 150rpx;
			padding-top: 30rpx;
		}

		.usere_content_t {
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 34rpx;
			margin-bottom: 5rpx;
		}

		.usere_content_b {
			width: 380rpx;
			font-size: 21rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #6F6F6F;
			line-height: 34rpx;
		}

		.time {
			position: absolute;
			top: 40rpx;
			right: 60rpx;
			width: 115rpx;
			height: 14rpx;
			font-size: 19rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 34rpx;
		}
	}

	.promotion {
		width: 750rpx;
		margin: 100rpx 49rpx 0 30rpx;

		text {
			width: 119rpx;
			height: 28rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
		}

		.promotion_tx {
			width: 597rpx;
			height: 383rpx;
			margin: 35rpx 0 35rpx 43rpx;
		}

		.strategy {
			width: 166rpx;
			height: 22rpx;
			margin: auto;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			line-height: 36rpx;
			font-family: PingFang SC;
		}
	}

	.tc {
		width: 649rpx;
		height: 705rpx;
		background: #FFFFFF;
		border-radius: 100%;
		margin: 40rpx 0 0 0;
	}

	.tc_top {
		width: 163rpx;
		height: 32rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 36rpx;
		margin: auto;
	}

	.tc_middle {
		margin: 48rpx 0 0 38rpx;

		.tc_middle_one {
			h5 {
				width: 470rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 43rpx;
				margin: 10rpx 0 10rpx 0;
			}
		}

		.tc_middle_two {
			h5 {
				width: 550rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 43rpx;
				margin-bottom: 10rpx;
				margin-top: 10rpx;
			}
		}

		.tc_middle_three {
			h5 {
				width: 550rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 43rpx;
				margin: 10rpx 0 10rpx 0;
			}
		}
	}

	.tc_bottom {
		position: absolute;
		bottom: 30rpx;
		left: 280rpx;
	}

	.gb {
		width: 50px;
		height: 50px;
		position: absolute;
		top: 20px;
		right: 0;

		.gb_a {
			width: 23rpx;
			height: 22rpx;
		}
	}

	.btn_bottom {
		width: 632rpx;
		height: 97rpx;
		background: #5490FF;
		border-radius: 18rpx;
		margin-top: 30rpx;
		margin-bottom: 20rpx;

		text {
			line-height: 91rpx;
			color: #fff;
		}
	}

	.body_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		background-color: #fff;
	}
</style>